<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="供应商名称"
                            v-model="searchInfo.orgName"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="status">
                    <el-select
                            v-model="searchInfo.settlementStatus"
                            placeholder="结算状态"
                            clearable
                            size="mini"
                    >
                        <el-option
                                v-for="item in settlementStatusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="mini"
                    >搜 索
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="openDialog('add')" v-if="btns&&btns.includes('batchConfirm')">批量确认
                    </el-button>
                </el-form-item>

            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column
                    type="selection"
                    :selectable="handleDisable"
                    width="55">
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商名称" align="center">
            </el-table-column>
            <el-table-column prop="settlementAmount" label="结算金额" align="center">
            </el-table-column>
            <el-table-column prop="settlementTime" label="结算时间" align="center">
            </el-table-column>
            <el-table-column prop="settlementStatus" label="结算状态" align="center">
                <template slot-scope="scope"> {{filterStatus(scope.row.settlementStatus)}}</template>
            </el-table-column>
            <!--超级管理员-->
            <el-table-column fixed="right" label="操作" align="center" width="250px" v-if="searchInfo.currentRoleId ===1">
                <template slot-scope="scope">
                    <el-button
                            @click="settlementDetailDialog(scope.row.settlementId)"
                            size="mini"
                            type="info"
                            icon="el-icon-info"
                            v-if="btns&&btns.includes('detail')"
                    >结算详情
                    </el-button>
                    <el-button
                            @click="confirmDialog(scope.row.settlementId)"
                            size="mini"
                            type="primary"
                            icon="el-icon-circle-check"
                            v-if="btns&&btns.includes('confirm')&&scope.row.settlementStatus===0"
                    >确认
                    </el-button>
                    <el-button
                            @click="transferDialog(scope.row,0)"
                            size="mini"
                            type="danger"
                            icon="el-icon-s-promotion"
                            v-if="btns&&btns.includes('transfer')&&scope.row.settlementStatus===1"
                    >转账
                    </el-button>
                    <el-button
                            @click="transferDialog(scope.row,1)"
                            size="mini"
                            type="info"
                            icon="el-icon-info"
                            v-if="btns&&btns.includes('transferDetail')&&scope.row.settlementStatus===2"
                    >转账信息
                    </el-button>
                </template>
            </el-table-column>
            <!--运营-->
            <el-table-column fixed="right" label="操作" align="center" width="250px" v-if="searchInfo.currentRoleId ===2">
                <template slot-scope="scope">
                    <el-button
                            @click="settlementDetailDialog(scope.row.settlementId)"
                            size="mini"
                            type="info"
                            icon="el-icon-info"
                            v-if="btns&&btns.includes('detail')"
                    >结算详情
                    </el-button>
                    <el-button
                            @click="confirmDialog(scope.row.settlementId)"
                            size="mini"
                            type="primary"
                            icon="el-icon-circle-check"
                            v-if="btns&&btns.includes('confirm')&&scope.row.settlementStatus===0"
                    >确认
                    </el-button>
                </template>
            </el-table-column>
            <!--财务-->
            <el-table-column fixed="right" label="操作" align="center" width="250px" v-if="searchInfo.currentRoleId ===6">
                <template slot-scope="scope">
                    <el-button
                            @click="settlementDetailDialog(scope.row.settlementId)"
                            size="mini"
                            type="info"
                            icon="el-icon-info"
                            v-if="btns&&btns.includes('detail')"
                    >结算详情
                    </el-button>
                    <el-button
                            @click="transferDialog(scope.row,0)"
                            size="mini"
                            type="danger"
                            icon="el-icon-s-promotion"
                            v-if="btns&&btns.includes('transfer')&&scope.row.settlementStatus===1"
                    >转账
                    </el-button>
                    <el-button
                            @click="transferDialog(scope.row,1)"
                            size="mini"
                            type="info"
                            icon="el-icon-info"
                            v-if="btns&&btns.includes('transferDetail')&&scope.row.settlementStatus===2"
                    >转账信息
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <!--订单详情列表弹出框-->
        <el-dialog
                :before-close="closeSettlementDialog"
                title="结算详情"
                :visible.sync="settlementDialogVisible"
                class="settlementDialogs"
        >
            <el-form
                    :model="materialForm"
                    :inline="true"
                    label-width="80px"
                    ref="materialForm"
            >
                <el-form-item label="班级名称" prop="className">
                    <el-input
                            autocomplete="off"
                            v-model="materialForm.className"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="学校" prop="schoolName">
                    <el-input
                            autocomplete="off"
                            v-model="materialForm.schoolName"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="教材名称" prop="courseMaterialName">
                    <el-input
                            autocomplete="off"
                            v-model="materialForm.courseMaterialName"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="教材费单价(元)" prop="courseMaterialPrice" label-width="120px">
                    <el-input
                            autocomplete="off"
                            v-model="materialForm.courseMaterialPrice"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="购买人数" prop="buyCount">
                    <el-input
                            autocomplete="off"
                            v-model="materialForm.buyCount"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="结算金额" prop="settlementMaterialAmount">
                    <el-input
                            autocomplete="off"
                            v-model="materialForm.settlementMaterialAmount"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeSettlementDialog" size="small">取 消</el-button>
            </div>
        </el-dialog>
        <!--转账信息弹出框-->
        <el-dialog
                :before-close="closeTransferDialog"
                title="转账信息"
                :visible.sync="transferDialogFormVisible"
                width="500px"
                class="dialogs"
        >
            <el-form
                    :model="transferForm"
                    :inline="true"
                    label-width="80px"
                    :rules="rules"
                    ref="transferForm"
            >
                <el-form-item label="银行账号" prop="bankAccount">
                    <el-input
                            autocomplete="off"
                            v-model="transferForm.bankAccount"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="户名" prop="bankUserName">
                    <el-input
                            autocomplete="off"
                            v-model="transferForm.bankUserName"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="开户行" prop="bankOpen">
                    <el-input
                            autocomplete="off"
                            v-model="transferForm.bankOpen"
                            size="small"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="转账金额" prop="transferAmount">
                    <el-input
                            autocomplete="off"
                            size="small"
                            v-model="transferForm.transferAmount"
                            :disabled="true"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="转账流水号" prop="transferNo" label-width="100px">
                    <el-input
                            autocomplete="off"
                            v-model="transferForm.transferNo"
                            size="small"
                            placeholder="转账流水号"
                            :disabled="!transferShowFlag"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="转账凭证" prop="voucherUrl" class="pics">
                    <el-upload
                            class="avatar-uploader"
                            :action="`${path}/api-system/file/upload/settlement`"
                            list-type="picture-card"
                            :show-file-list="false"
                            :before-upload="checkFile"
                            :headers="{ Authorization: token }"
                            :on-error="uploadError"
                            :on-success="uploadSuccess"
                            :disabled="!transferShowFlag"
                    >
                        <div class="header-background">
                            <img v-if="isShowImg" :src="transferForm.voucherUrl" class="avatar" width="100%"
                                 height="100%"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeTransferDialog" size="small">取 消</el-button>
                <el-button @click="enterTransferDialog" type="primary" size="small" v-if="transferShowFlag">确 定
                </el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {
        settlementMaterialDetail,
        settlementMaterialList,
        settlementTransferDetail,
        settlementTransferSave,
        updateMaterialSettlementStatus
    } from "@/api/settlement";
    import {supplierSimpleInfo} from "@/api/supplier";
    import infoList from "@/components/mixins/infoList";

    // We just use `setTimeout()` here to simulate an async operation
    // instead of requesting a real API server for demo purpose.
    export default {
        mixins: [infoList],
        data() {
            return {
                isShowImg: false,
                path: process.env.VUE_APP_BASE_API,
                listApi: settlementMaterialList,
                transferForm: {},
                materialForm: {},
                transferShowFlag: true,
                transferDialogFormVisible: false,
                settlementDialogVisible: false,
                searchInfo: {supplierName: '', settlementStatus: ''},
                settlementStatusOptions: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 0,
                        label: '待确认'
                    },
                    {
                        value: 1,
                        label: '已确认'
                    },
                    {
                        value: 2,
                        label: '已打款'
                    }
                ],
                rules: {
                    bankAccount: [{required: true, message: "银行账号不能为空", trigger: "blur"}],
                    bankOpen: [{required: true, message: "开户行不能为空", trigger: "blur"}],
                    bankUserName: [{required: true, message: "户名不能为空", trigger: "blur"}],
                    transferNo: [{required: true, message: "请输入转账流水号", trigger: "blur"}]
                },
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            filterStatus(val) {
                switch (val) {
                    case 0:
                        return '待确认'
                    case 1:
                        return '已确认'
                    case 2:
                        return '已打款'
                    default:
                        break;
                }
            },
            //结算信息
            closeSettlementDialog() {
                this.settlementDialogVisible = false;
                this.$refs.materialForm.resetFields();
            },
            handleDisable(row) {
                if (row.settlementStatus === 0) {
                    return true;
                } else {
                    return false;
                }
            },
            //结算详情
            async settlementDetailDialog(val) {
                this.settlementDialogVisible = true;
                const res = await settlementMaterialDetail(val);
                if (res.statusCode === 0) {
                    this.materialForm = res.data
                }

            },
            //转账信息
            async transferDialog(val, flag) {
                if (flag === 0) {
                    this.transferShowFlag = true;
                    //获取供应商转账信息
                    const res = await supplierSimpleInfo(val.supplierId);
                    this.transferForm = {
                        settlementId: val.settlementId,
                        transferAmount: val.settlementAmount,
                        bankAccount: res.data.bankAccount,
                        bankOpen: res.data.bankOpen,
                        bankUserName: res.data.bankUserName,
                        transferType: 1
                    }
                }
                if (flag === 1) {
                    const res = await settlementTransferDetail(val.settlementId);
                    this.transferForm = res.data;
                    if (res.data.voucherUrl !== undefined && res.data.voucherUrl !== '') {
                        this.isShowImg = true;
                    }
                    this.transferShowFlag = false;
                }
                this.transferDialogFormVisible = true;
            },
            closeTransferDialog() {
                this.transferDialogFormVisible = false;
                this.$refs.transferForm.resetFields();
            },
            //确认打款
            confirmDialog(val) {
                this.$confirm("确认后款项稍后会汇入供应商账户?", "是否确认", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await updateMaterialSettlementStatus(val, 1);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消",
                        });
                    });
            },
            //进行转账
            enterTransferDialog() {
                this.$refs.transferForm.validate(async (valid) => {
                    if (valid) {
                        const res = await settlementTransferSave(this.transferForm);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "转账成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                        this.closeTransferDialog();
                    }
                });
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            checkFile(file) {
                this.saveFlag = false;
                this.isShowImg = false;
                this.fullscreenLoading = true;
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                return (isPng || isJPG) && isLt2M;
            },
            uploadSuccess(res, file) {
                this.fullscreenLoading = false;
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    this.saveFlag = true;
                    this.isShowImg = true;
                    this.transferForm.voucherUrl = res.data;
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            },
            uploadError() {
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.saveFlag = true;
                this.fullscreenLoading = false;
            }
        },
        created() {
            this.searchInfo.currentRoleId = this.userInfo.roleId;
            this.btns = this.$route.meta.btnList
            this.getTableData()
        },
    }
</script>
<style scoped lang="scss">
    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 100px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409eff;
        }
    }

    .settlementDialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            height: 200px;
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        .item-label {
            ::v-deep .el-form-item__label {
                width: 142px !important;
            }

            ::v-deep .el-input__inner {
                width: 162px !important;
            }

            ::v-deep .el-date-editor.el-input {
                width: 162px !important;
            }
        }

        .item-labels {
            ::v-deep .el-form-item__content {
                width: 225px !important;
            }

            ::v-deep .el-form-item__label {
                width: 80px !important;
            }

            ::v-deep .el-input {
                width: 102px !important;
            }

            ::v-deep .el-input__inner {
                width: 102px !important;
            }

        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409eff;
        }
    }

    .header-background {
        position: absolute;
        width: 146px;
        height: 146px;
    }

</style>
